class Game
{
    constructor(el) 
    {
    // 一、保存地图对象 
    this.el = document.querySelector(el)    // 保存地图对象，这里的this指的是game，el是指最大盒模型map，this.el指的是将地图标签对象存了起来
    
    // 二、创建地图：new一下Map构造函数、调用原型上的create方法
    this.map = new Map(this.el)             // 这里的 this.el 指的是地图标签对象，是一个实参，这里是给game增加一个Map的构造函数，将这个实参传递给Map构造函数
    this.map.create()                        // 调用Map构造函数的原型对象上的create方法

    // 三、创建食物：new一下Food构造函数、调用原型上的create方法
    this.food = new Food(this.el)             // 这里的 this.el 指的是地图标签对象，是一个实参，这里是给game增加一个Food的构造函数，将这个实参传递给Food构造函数
    this.food.create()                        // 调用Food构造函数的原型对象上的create方法

    // 四、创建蛇：new一下Snake构造函数、调用原型上的create方法
    this.snake = new Snake(this.el)             // 这里的 this.el 指的是地图标签对象，是一个实参，这里是给game增加一个Snake的构造函数，将这个实参传递给Snake构造函数
    this.snake.create()                        // 调用Snake构造函数的原型对象上的create方法

    this.t = null
    }

    start()
    {
        // 1、间隔150毫秒让蛇动
        this.t = setInterval(() => {
            this.snake.move()
            
            // 3、判断是否吃到食物【看蛇头的位置和食物的位置是否一致，即left和top值是否一致】
            // 3.1 蛇头的位置【left和top】
            let snakeLeft = this.snake.snakeObj[0].left * this.snake.size
            let snakeTop = this.snake.snakeObj[0].top * this.snake.size
            // 3.2 食物的位置【left和top】
            let foodLeft = this.food.foodObjLeft
            let foodTop = this.food.foodObjTop

            // 3.3 判断是否撞墙
            if(snakeLeft>780 || snakeLeft<0 || snakeTop<0 || snakeTop>380) clearInterval(this.t)
            
            // 3.4 做判断
            if(snakeLeft == foodLeft && snakeTop == foodTop){
                // 3.4.1 让食物移动到下一个地方
                this.food.move()     

                // 3.4.2 让蛇身加一个长度【即在this.snake.snakeObj这个数组的最后面push一个值,这个值是对象类型的，有left、top、color、el】
                let last = this.snake.snakeObj[this.snake.snakeObj.length - 1]
                this.snake.snakeObj.push({
                    left:last.left,
                    top:last.top,
                    color:last.color,
                    el:null
                })
                // 3.4.3 重新创建蛇
                this.snake.create()
            }
        },150)

        // 2、监控键盘上下左右键，来更改蛇的direction
            // 2.1 给网页绑定键盘按下事件
            document.onkeydown = (evt) => {
                // 2.2 获取事件对象
                let e = evt || window.event
                // 2.3 获取键盘按键的编码
                console.log(e.keyCode);    // 上：38  下：40  左：37  右：39
                // 2.4 通过键盘按下的上下左右键来判断direction
                switch (e.keyCode) {
                    case 38:
                        this.snake.direction = 'top'
                        break
                    case 40:
                        this.snake.direction = 'bottom'
                        break
                    case 37:
                        this.snake.direction = 'left'
                        break
                    case 39:
                        this.snake.direction = 'right'
                        break
                    default: 
                        break
                }
            }
    }
}
